<!--
 * @Description: 正常人群分布
 * @Author: Ronda
 * @Date: 2020-06-19 14:40:35
 * @LastEditors: Zourongsheng
 * @LastEditTime: 2021-07-17 15:21:03
-->
<template>
  <div>
  
    <div class="demo-title">
        <h1>正常人群分布</h1>
    </div>
    <div id="Zoursmap">

    </div>
  </div>
</template>

<script>

import axios from "@/utils/axios.js";
export default {
  data() {
    return {
      dataMap: [],
    };
  },
  computed: {},
  methods: {
    draw(){
        
    },
    async getMapData(){
        let res = await axios.get("/normal/findAllNormal");
        console.log(res.data.data);
       
        this.draw();    
    }
  },
  created() {},
  mounted() {
      this.getMapData();
      var map =  new AMap.Map('Zoursmap', {
            zoom: 11.43,
            resizeEnable: false, //是否监控地图容器尺寸变化
            showLabel: true,
            viewMode: '3D',
            center: [116.397128, 39.916527],
            mapStyle: 'amap://styles/grey',
        });

        var loca = new Loca.Container({
            map,
            opacity: 0.5,
        });

        var geo = new Loca.GeoJSONSource({
            url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/cuisine.json',
        });
// https://a.amap.com/Loca/static/loca-v2/demos/mock_data/cuisine.json
// http://localhost:6677/trajectory/findAllTrajectory
        var pl = window.pl = new Loca.PointLayer({
            zIndex: 10,
            blend: 'lighter',
        });

        var style = {
            radius: 3.5,
            unit: 'px',
            color: '#3C1FA8',
            borderWidth: 0,
            blurWidth: 3.5,
        }
        pl.setSource(geo);
        pl.setStyle(style);
        loca.add(pl);

        var dat = new Loca.Dat();
        dat.addLayer(pl);

  },
};
</script>
<style scoped>
#Zoursmap {
  width: 100%;
  height: calc((100vh - 50px));

}
    
  .demo-title {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 1;
    }

h1 {
    font-size: 18px;
    margin: 0;
    color: rgb(180, 180, 190);
  }

  h3 {
      font-size: 12px;
      font-weight: normal;
      margin-top: 5px;
     color: rgb(150,150,150);
  }
</style>